<script setup>
import { ref } from 'vue';	
import { onLoad } from '@dcloudio/uni-app'
import { getCourseListApi, getYunDuoBookListApi } from '@/api/index.js';
import NavBar from '@/components/navbar/index.vue'
import AddBookDialog from '@/components/add-book-modal/index.vue'

let stage = null
const show = ref(false)
const book = ref(null)
const courseCode = ref(null)
const bookList = ref([])
const courseList = ref([])
const pageTitle = ref('')
const loading = ref(false)
onLoad(({data})=>{
	const { name, stage: s, course } = JSON.parse(decodeURIComponent(data))
	stage = s
	getYunduoBook(stage, course)
})
const getYunduoBook = async (stage, course) =>{
	try{
		loading.value = true
		const { obj } = await getYunDuoBookListApi({stage, course})
		bookList.value = obj
		courseCode.value = course
		loading.value = false
	}catch(e){
		console.error(e)
		loading.value = false
	}
}
const changeCourse = (code) =>{
	getYunduoBook(stage, code)
}	
const addBook = (item) =>{
	book.value = item
	show.value = true
}
</script>

<template>
	<NavBar :title="pageTitle" :underNavBar="false" />
	<view v-if="bookList.length" class="book-container">
		<view 
			class="book-card" 
			v-for="(item, index) in bookList" 
			:key="index"
			@click="addBook(item)"
		>
			<image :src="item.cover" mode="aspectFill" />
			<text>{{item.title}}</text>
		</view>
	</view>
	<view v-show="!bookList.length && !loading" class="null-data">
		<image src="/static/index/null-data.png"/>
		<text>暂无数据~</text>
	</view>
	<AddBookDialog
		:show="show" 
		:book="book" 
		@onClose="show = false" 
	/>
</template>

<style lang="scss">
page{
	background: linear-gradient(to bottom, #FFF4D6, #FFFEFA);
}	
.course-container{
	width: 598rpx;
	height: 62rpx;
	display: flex;
	justify-content: space-between;
	margin: 50rpx 76rpx 0 76rpx;
	.course-item{
		height: 62rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 400;
		color: #000000;
		image{
			width: 52rpx;
			height: 19rpx;
		}
	}
	.course-item--on{
		font-size: 36rpx;
		line-height: 36rpx;
		font-weight: bold;
		color: #000000;
	}	
}
.book-container{
	width: 708rpx;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	margin: 31rpx 21rpx 0 21rpx;
	.book-card{
		width: 212rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		position: relative;
		margin: 0 12rpx 60rpx 12rpx;
		image{
			width: 212rpx;
			height: 283rpx;
			border-radius: 12rpx;
		}
		text{
			width: 212rpx;
			margin-top: 22rpx;
			max-height: 50rpx;
			font-size: 25rpx;
			line-height: 25rpx;
			font-weight: 500;
			color: #000000;
			text-overflow: ellipsis;  
			display: -webkit-box;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-family: Source Han Sans CN;
		}
	}
}
.null-data{
	position: fixed;
	left: 50%;
	top: 50%;
	width: 314rpx;
	text-align: center;
	transform: translate(-50%, -50%);
	image{
		width: 314rpx;
		height: 300rpx;
	}
	text{
		margin-top: 20rpx;
		display: inline-block;
		color: #D1CDCE;
	}
}
</style>